<template>

  <div class="category-box">
    <!--搜索框 -->
 <div class="search">
  <van-sticky>
    <van-search input-align="center" placeholder="搜索商品,工30000+款好物" style="border-bottom: 1px solid #e9e9e9;"/>
    </van-sticky>
 </div>
    <div class="fenlei">
      <!-- 左侧导航 -->
      <van-sticky :offset-top="55">
      <van-sidebar class="beijing" v-model="active" @change="onChange">
        <van-sidebar-item class="wenzi" :title="item.name" v-for="item in categoryList?.categoryL1List" :key="item.id" />
      </van-sidebar>
    </van-sticky>

      <!-- 右侧主体 -->
      <div class="right" style="border-left: 1px solid #e2e2e2;" >
        <!-- 上方图片 -->
        <div class="bannerImage">
          <img :src="categoryList?.currentCategory.bannerList[0].picUrl" alt="" />
          <p class=""></p>
        </div>

        <div v-for="item in categoryList?.categoryGroupList" :key="item.id">
          <!-- 标题 -->
          <div class="title">
          <div class="mytitle"  font-size="20px" style="border-bottom: 1px solid #e9e9e9;">
            {{ item.name }}
          </div>
         </div>

          <!-- 图文 -->
          <van-grid :border="false" class="categoryImageList" :column-num="3">
            <van-grid-item v-for="image in item.categoryList" :key="image.id">
              <van-image class="image"  :src="image.wapBannerUrl"></van-image>
              <b>{{ image.name }}</b>
            </van-grid-item>

          </van-grid>
        </div>

      </div>
    </div>
  </div>

</template>


<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: 'Category',
})
</script>
<script lang="ts" setup>
import cateApi from "@/api/category"
import { categoryListData } from "@/api/category"
import { ref, onMounted } from 'vue';
// const categoryList=ref<categoryData[]>()
const categoryList = ref<categoryListData>()

const active = ref(0);
//切换分类
function onChange(index: number) {
  active.value = index
  // console.log(index);
  console.log();
  const id = categoryList.value?.categoryL1List[index].id;
  // console.log(id);
  getCategoryList(id)
}
//获取数据
async function getCategoryList(id?: number) {
  let res = await cateApi.getCategoryList(id)
  categoryList.value = res;
  // categoryList.value=res.categoryL1List
  // currentCategoryList.value = res.currentCategory;
  // console.log(res)
}
//商品列表
// const goodsList = async(categoryId:number)=>{
//   let res=await cateApi.getGoodsList(categoryId)
//   // currentCategory.value=res.currentCategory
//   subCategoryList=res.currentCategory.subCateList
//   console.log(subCategoryList);

// }

onMounted(async () => {
  await getCategoryList()
})


</script>






<style scoped>
.van-sidebar-item--select {
  color: #ab2b2b;
}

.van-sidebar-item {
  padding: 10px;
}

.van-sidebar-item--select:before {
  width: 3px;
  height: 30px;
  background-color: #ab2b2b;
}
.fenlei .beijing{
  background-color: white;
  /* height: 20px; */
}
.fenlei .wenzi {
  font-size: 14px;
}

.fenlei{

  display: flex;
}
.categoryImageList{
  width: 285px;
  /* height: 300px; */
}
.categoryImageList b{
  font-size: .24rem;
}

.bannerImage {
  border-radius: 2%;
  width: 265px;
  height: 100px;
  margin: 10px 10px 10px 10px;
  background-color:rgb(234, 234, 234);
}
.bannerImage img{
  /* margin-left: 8px; */
  border-radius: 2%;
  width: 265px;
  height: 100px;
}
.title{
  padding-left: 10px;
}
.mytitle{
  /* width: 415px; */
  font-weight: bold;
  padding-bottom:6px;
  font-size: 15px;
}

</style>





